<template>
  <div class="supplier-login-con">
    <div class="title">欢迎注册顾本供应链系统</div>
    <a-scrollbar style="height: calc(100vh - 75px); overflow: auto">
      <div class="main">
        <div class="main-con" v-if="!isAdd">
          <div class="title-desc tsc">您的合作伙伴，{{ routeInfo.query.companyName }} 邀请您入驻供应链系统！</div>

          <div>
            <div class="title-bar">供应商入住资料</div>
            <a-form :model="form" ref="formRef" :rules="rules" auto-label-width>
              <a-form-item field="companyName" label="公司名称：">
                <a-input v-model="form.companyName" placeholder="请输入公司名称" max-length="24" show-word-limit />
              </a-form-item>
              <a-form-item field="companyShortName" label="简称：">
                <a-input v-model="form.companyShortName" placeholder="用于供应商登录名，请输入一个容易记住的名称" max-length="8" show-word-limit />
              </a-form-item>
              <a-form-item field="socialCreditCode" label="统一社会信用代码：">
                <a-input v-model="form.socialCreditCode" placeholder="请输入" />
              </a-form-item>
              <a-form-item label="主营行业：">
                <a-input v-model="form.companyIndustry" placeholder="请输入" />
              </a-form-item>
              <a-form-item label="企业规模：">
                <a-select v-model="form.companyScale" placeholder="请选择">
                  <a-option value="10人以下">10人以下</a-option>
                  <a-option value="10-20人">10-20人</a-option>
                  <a-option value="20-50人">20-50人</a-option>
                  <a-option value="50-100人">50-100人</a-option>
                  <a-option value="100-500人">100-500人</a-option>
                  <a-option value="500人以上">500人以上</a-option>
                </a-select>
              </a-form-item>
              <a-form-item label="公司地址：">
                <a-input v-model="form.address" placeholder="请输入" />
              </a-form-item>
              <a-form-item label="营业执照：">
                <a-upload list-type="picture-card" action="/" :on-before-remove="remove" :file-list="picList" :on-before-upload="uploadImg" image-preview />
              </a-form-item>
              <div class="title-bar">主管理登录账号</div>
              <a-form-item field="userName" label="姓名：">
                <a-input v-model="form.userName" placeholder="请输入" />
              </a-form-item>
              <a-form-item field="loginName" label="用户名：">
                <a-input v-model="form.loginName" placeholder="请输入" />
              </a-form-item>
              <a-form-item field="mobile" label="手机号：">
                <a-input v-model="form.mobile" placeholder="请输入" />
              </a-form-item>
              <a-form-item field="verifyCode" label="验证码：" class="code">
                <a-input v-model="form.verifyCode" placeholder="请输入">
                  <template #suffix>
                    <a-button type="primary" @click="getCode" :disabled="countDownNum != 60">{{ countDownNum != 60 ? `${countDownNum}秒后重新发送` : '获取验证码' }}</a-button>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item field="loginPwd" label="初始密码：">
                <a-input-password v-model="form.loginPwd" placeholder="请输入" allow-clear />
              </a-form-item>
            </a-form>
            <div style="text-align: center">
              <a-button type="primary" @click="submit" :loading="submitLoading">提交注册</a-button>
              <div style="margin-top: 10px">已注册 <a-button type="text" @click="toLogin">去登录</a-button> </div>
            </div>
          </div>
        </div>
        <div style="height: calc(100vh - 150px); overflow: auto; text-align: center; font-size: 20px" v-else>
          <img style="margin-top: 100px" width="80" height="80" src="../../../assets/u28.svg" alt="" />
          <div>您的注册资料已经提交，等待平台方管理员审核；</div>
          <div>审核结果将以短信的信息通知到手机号 {{ userPhone }}</div>
        </div>
      </div>
    </a-scrollbar>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { registerSupplierOutter, isCompanyShortNameExist, isSocialCreditCodeExist } from '@/api/system'
  import { uploadFileNoAuth } from '@/api/base'
  import { Message } from '@arco-design/web-vue'
  import { useRoute } from 'vue-router'

  const formRef = ref()
  const form: any = ref({})
  let isAdd = ref(false)
  let submitLoading = ref(false)
  let userPhone = ref('')
  let picList: any = ref([])
  let countDownNum = ref(60)
  const routeInfo = useRoute()

  const rules: any = {
    companyName: [{ required: true, message: '请输入公司名称' }],
    companyShortName: [
      {
        required: true,
        validator: (value: string, cb: any) => {
          return new Promise(async (resolve: any) => {
            if (!value) {
              cb('请输入简称')
              resolve()
            } else {
              const res: any = await isCompanyShortNameExist({ companyShortName: form.value.companyShortName })
              if (res.data) {
                cb('简称已存在，请换一个')
              }
              resolve()
            }
          })
        },
      },
    ],
    socialCreditCode: [
      {
        required: true,
        validator: (value: string, cb: any) => {
          return new Promise(async (resolve: any) => {
            if (!value) {
              cb('请输入社会信用代码')
              resolve()
            } else {
              const res: any = await isSocialCreditCodeExist({ socialCreditCode: form.value.socialCreditCode })
              if (res.data) {
                cb('社会信用代码重复')
              }
              resolve()
            }
          })
        },
      },
    ],
    userName: [{ required: true, message: '请输入姓名' }],
    loginName: [{ required: true, message: '请输入用户名' }],
    mobile: [{ required: true, message: '请输入手机号码' }],
    verifyCode: [{ required: true, message: '请输入验证码' }],
    loginPwd: [{ required: true, message: '请输入初始密码' }],
  }

  const uploadImg: any = async (file: any) => {
    let type = file.type.split('/')[1]
    if (!['JPG', 'PNG', 'BMP', 'GIF', 'JPEG'].includes(type.toUpperCase())) {
      Message.error('请上传JPG/PNG/BMP/GIF/JPEG格式的图片')
      return false
    }
    if (file.size / 1024 / 1024 > 5) {
      Message.error('图片最大为5M')
      return false
    }
    let formData = new FormData()
    formData.append('file', file)
    const res: any = await uploadFileNoAuth(formData)
    if (res) {
      let obj = {
        url: res.data.publicUrl,
      }
      picList.value.push(obj)
    }
  }

  const remove: any = (file: any) => {
    picList.value = picList.value.filter((e: any) => e.url != file.url)
  }

  const getCode = async () => {
    let timer = setInterval(() => {
      countDownNum.value == countDownNum.value--
      if (countDownNum.value <= 0) {
        clearInterval(timer)
        countDownNum.value = 60
      }
    }, 1000)
  }

  const toLogin = () => {
    window.location.href = `${window.location.origin}/#/login`
  }

  const submit = () => {
    formRef.value.validate(async (valid: any) => {
      if (!valid) {
        try {
          submitLoading.value = true
          let arr = picList.value.map((e: any) => e.url) || []
          form.value.businessLicensePicList = arr
          form.value.supplierId = routeInfo.query.id
          const res: any = await registerSupplierOutter(form.value)
          if (res) {
            isAdd.value = true
            userPhone.value = form.value.mobile
            form.value = {}
          }
        } catch (error) {}
        submitLoading.value = false
      }
    })
  }
</script>

<style lang="less" scoped>
  .code {
    :deep(.arco-input-wrapper) {
      padding-right: 0 !important;
    }
  }

  .tsc {
    text-align: center;
  }

  .supplier-login-con {
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
    padding: 20px 0;
    box-sizing: border-box;
    .title {
      font-size: 25px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
    }
    .main {
      width: 1000px;
      // height: calc(100% - 50px);
      margin: 0 auto;
      background-color: white;
      padding: 10px 0;
      box-sizing: border-box;
      .main-con {
        width: 600px;
        height: 100%;
        margin: 0 auto;

        .title-desc {
          font-size: 18px;
        }
      }
    }
  }
</style>
